import { InputNumber } from "antd";
import IINumberRangeNu  from './INumberRange';
import decideUnderscore from './utlis';
import './index.less';
// 添加一个常量用来存储变量值
const MERGE_PARAM = {};
/**
 * 
 * 1 提供common 属性支持所有的number
 * 2 设置一个 disable 属性便于查看使用
 * 2 提供一个 ranges数组字段用来提供需要支持common
 * 以后还要增加一个 key: 'name' -> 用来传递给外部  rule
 * 3 如何提供外部逻辑
 */
const NumberRange = (props: IINumberRangeNu) => {
    const MERGE_ARRAY:any = [];
    const {
        ranges,
        editable,
        className,
        common,
        onChange,
    } = props;
    /**
     * @description 如果是查看模式需要设置模式
     */
    const renderEmpty=()=>{
        if(Array.isArray(ranges) && ranges.length){
           return ranges.map((item: any, index:number)=>(<span key={index} className={item?.className}>{item.value+decideUnderscore(ranges,index)}</span>));
        }else{
            return <span className={className}>{common?.value}</span>;
        }
    }
    /**
     * @description 渲染当前input
    */
    const renderInputRange=()=>{
        if(Array.isArray(ranges) && ranges.length){
            return ranges.map((itme: any, index:number)=>{
            const commonProp = {...props, ...itme};
             return <><InputNumber key={index} className="input-number-range" {...commonProp} value = { Array.isArray(props?.value)? props?.value[index] : null} onChange={(val)=>{commonProp.key ? proxyFunc({[commonProp.key]:val}, commonProp): proxyArray(val, index, commonProp)}} />{decideUnderscore(ranges,index)}</>
            })
         }else{
             return <InputNumber className="input-number-range" {...common}/>;
         } 
    }
    /**
     * @description 设置一个拦截的方法,后面做校验
    */
   const proxyFunc = (val:any, commonProp: any)=>{
     const mergeParam = {...MERGE_PARAM, ...val};
     // TODO: 这里可以用来添加数据验证
     if(commonProp?.rule){
        if(commonProp.rule()){
            onChange && onChange(mergeParam);
        }
     }else {
        onChange && onChange(mergeParam);
     }
   }
   /**
    * @description 返回数组，如果传入我们默认出数组
    */
   const proxyArray =  (val:any, index:number, commonProp: any)=>{
        MERGE_PARAM[index] = val;
        Object.keys(MERGE_PARAM).forEach(v => {
           MERGE_ARRAY.push(MERGE_PARAM[v])
        })
        // TODO: 这里可以用来添加数据验证
        if(commonProp?.rule){
        if(commonProp.rule()){
            onChange && onChange(MERGE_ARRAY);
        }
        }else {
            onChange && onChange(MERGE_ARRAY);
        }
   }
    return <div className="input-number-range-ctt">
        {
            editable ? renderInputRange() : renderEmpty()
        }
        </div>;
};

export default NumberRange;
